<template>
  <div class="qa bg-white flex-col">
    <div class="item" :class="{open: item.status}" v-for="(item, index) in data" :key="`item${index}`" @tap="showItem(index)">
      <div class="name items-center">{{item.name}} <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/flow-down.png" alt="" class="img"></div>
      <div class="content flex-col" v-if="item.status === 1">
        <text v-for="(qa, idx) in item.content.split(';')" :key="`qa${idx}`">{{qa}}</text>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        data: [
          {
            name: '订单问题',
            content: `Q: 取消订单后的到账问题;A: 由于风控或商家原因关闭的订单,支付部分会在1-3个工作日退还至您的支付账户;
                  Q: 怎么续租;A: 订单到期前,在支付宝APP搜索“租机虫”-进入“我的订单”,找到订单点击续租即可以。需要帮助可以在线咨询或者咨询平台服务电话：4000850889。 ;`,
            status: 0
          },
          {
            name: '故障维修问题',
            content: `Q: 故障、损坏、丢失怎么办?;A: 正常设备折旧由商家承担。设备自然产生的硬件故障由商家免费更换,软件问题由商家协助。人为损坏,碰撞,划痕等问题,租户需承担维修费用,以及维修期间的租期费用。粉碎性破坏,丢失,拆机按设备市场价格赔偿。;
                  Q: 设备出现故障了怎么办?;A: 设备出现故障,可以致电给商家。;`,
            status: 0
          },
          {
            name: '其他问题',
            content: `Q: 设备租期计算规则;A: 租期是从租户签收次日起算（正常是按快递送货当日,由租户原因延误签收的时间,计算在租期内）,例如租户下单选择日期是18号,但20号才签收从21号起算租期,到期日相应顺延2天再归还。;`,
            status: 0
          }
        ]
      }
    },
    methods: {
      showItem(index) {
        this.data[index].status = this.data[index].status ? 0 : 1
      }
    }
  }
</script>
<style lang="scss">
  .qa {
    width: 100%;
    padding: 11px 17px 0;
    .item {
      min-height: 44px;
      &.open {
        .name {
          .img {
            transform: rotate(180deg);
          }
        }
      }
      .name {
        width: 100%;
        border-bottom: 1px solid #e1e1e1;
        height: 44px;
        .img {
          width: 17px;
          height: 9px;
          margin-left: auto;
          transition: transform 0.3s;
        }
      }
      .content {
        padding: 12px 0;
        font-size: 12px;
        font-weight: bold;
        line-height: 24px;
        color: #434343;
      }
    }
  }
</style>
